<template>
  <div class="select_date">
    <div class="show_date" @click="handleShow">
      {{ dateRange.start }} - {{ dateRange.end }}
    </div>

    <van-popup v-model="show" position="bottom">
      <div class="content">
        <div class="top">
          <span>筛选</span>
          <!-- 关闭 -->
          <van-icon name="cross" @click="show = false" />
        </div>

        <div class="fast-wrap">
          <div class="title">选择时间范围</div>
          <div class="desc">
            请切换至"近7天"查看已撤销的市价、限价、高级限价委托，且已撤销的委托记录将仅保留2小时
          </div>

          <div class="fast-list">
            <div
              class="item"
              v-for="(item, index) in fastList"
              :key="index"
              @click="handleFastSelect(item.value)"
              :class="{ 'active-fast': activeFast === item.value }"
            >
              {{ item.text }}
            </div>
          </div>
        </div>

        <div class="date-wrap">
          <div
            class="time"
            :class="activeTime === 'start' && 'active-time'"
            @click="activeTime = 'start'"
          >
            {{ dateRange_inner.start }}
          </div>
          <div style="color: #6b6b6b">-</div>
          <div
            class="time"
            :class="activeTime === 'end' && 'active-time'"
            @click="activeTime = 'end'"
          >
            {{ dateRange_inner.end }}
          </div>
        </div>

        <div class="picker-wrap">
          <van-datetime-picker
            v-model="pickerDate"
            type="date"
            title="选择年月日"
            :show-toolbar="false"
            class="van_picker_custom"
            item-height="32"
            visible-item-count="5"
            :formatter="formatter"
            @change="changeDate"
          />
        </div>

        <div class="hide-revoked">
          <van-checkbox
            v-model="checked"
            shape="square"
            icon-size="18px"
          ></van-checkbox
          >隐藏已撤销委托
        </div>

        <div class="buttons">
          <van-button
            round
            style="
              color: #fff;
              background-color: transparent;
              border-color: #2c2c2c;
            "
            @click="reset"
            >重置</van-button
          >
          <van-button round style="color: #000" @click="confirm"
            >确认</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup, DatetimePicker } from "vant";

export default {
  name: "DateRangeSelect",
  components: {
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
  },
  props: {
    dateRange: {
      type: Object,
      default: () => ({ start: "", end: "" }),
    },
  },
  data() {
    return {
      show: false,
      fastList: [
        { text: "近7天", value: "7" },
        { text: "近30天", value: "30" },
        { text: "近90天", value: "90" },
      ],
      activeFast: "7",
      activeTime: "start",
      pickerDate: "",
      dateRange_inner: {
        start: "",
        end: "",
      },
      checked: false,
    };
  },
  watch: {
    activeTime: {
      handler(val) {
        this.pickerDate = new Date(this.dateRange_inner[val]);
      },
      immediate: true,
    },
    activeFast: {
      handler(val) {
        this.dateRange_inner.start = new Date(
          new Date().getTime() - val * 24 * 60 * 60 * 1000
        ).toLocaleDateString();
        this.dateRange_inner.end = new Date().toLocaleDateString();
        this.pickerDate = new Date(this.dateRange_inner[this.activeTime]);
      },
      immediate: true,
    },
  },
  mounted() {
    this.dateRange_inner.start = new Date(
      this.dateRange.start
    ).toLocaleDateString();
    this.dateRange_inner.end = new Date(
      this.dateRange.end
    ).toLocaleDateString();
    this.pickerDate = new Date(this.dateRange_inner[this.activeTime]);
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      } else if (type === "month") {
        return val + "月";
      } else if (type === "day") {
        return val + "日";
      }
      return val;
    },
    changeDate() {
      this.dateRange_inner[this.activeTime] = new Date(
        this.pickerDate
      ).toLocaleDateString();
    },
    reset() {},
    confirm() {
      this.$emit("update:dateRange", this.dateRange_inner);
      this.show = false;
    },
    handleShow() {
      this.show = true;
    },
    handleFastSelect(value) {
      this.activeFast = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 40px 30px;
  padding-bottom: 60px;
  background: #121212;
  color: #fff;
  display: grid;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  * {
    font-size: 30px;
  }
}

.fast-wrap {
  .title {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 26px;
  }

  .desc {
    font-size: 22px;
    color: #888888;
  }

  .fast-list {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 26px;
    color: #929292;

    div {
      border: 1px solid #2f2f2f;
      border-radius: 10px;
      padding: 10px 25px;
    }

    .active-fast {
      border-color: #fff;
      color: #fff;
    }
  }
}

.date-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;

  .time {
    border: 1px solid #6b6b6b;
    border-radius: 8px;
    padding: 20px 30px;
  }

  .active-time {
    border-color: #fff;
  }
}

.picker-wrap {
  margin-top: 20px;
}

/deep/ .van_picker_custom {
  .van-picker-column {
    background: #121212;

    .van-ellipsis {
      color: #fff;
    }
  }

  .van-picker__frame {
    border: 2px solid #242426;
    border-radius: 10px;
    padding: 0 200px;
  }

  .van-picker__mask {
    background: transparent;
  }
}

.hide-revoked {
  margin: 10px 0;
  font-size: 28px;
  display: flex;
  align-items: center;
  gap: 20px;

  /deep/ .van-icon {
    border-color: #3e3e3e;
    border-radius: 8px;
  }
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  justify-content: center;

  .van-button {
    font-weight: bold;
  }
}

.show_date {
  white-space: nowrap;
}
</style>
